<html>
<head>
<title>Headless remote debugging</title>
<style>
</style>

<script>
const fetchjson = (url) => fetch(url).then(r => r.json());

function loadData() {
  const getList = fetchjson("/json/list");
  const getVersion = fetchjson('/json/version');
  Promise.all([getList, getVersion]).then(parseResults);
}

function parseResults([listData, versionData]){
    const version = versionData['WebKit-Version'];
    const hash = version.match(/\s\(@(\b[0-9a-f]{5,40}\b)/)[1];
    listData.forEach(item => appendItem(item, hash));
}

function appendItem(item, hash) {
  let link;
  if (item.devtoolsFrontendUrl) {
    link = document.createElement("a");
    var devtoolsFrontendUrl = item.devtoolsFrontendUrl.replace(/^\/devtools\//,'');
    link.href = `https://chrome-devtools-frontend.appspot.com/serve_file/@${hash}/${devtoolsFrontendUrl}&remoteFrontend=true`;
    link.title = item.title;
  } else {
    link = document.createElement("div");
    link.title = "The tab already has active debugging session";
  }

  var text = document.createElement("div");
  if (item.title)
    text.textContent = item.title;
  else
    text.textContent = "(untitled tab)";
  if (item.faviconUrl)
    text.style.cssText = "background-image:url(" + item.faviconUrl + ")";
  link.appendChild(text);

  var p = document.createElement("p");
  p.appendChild(link);

  document.getElementById("items").appendChild(p);
}
</script>
</head>
<body onload='loadData()'>
  <div id='caption'>Inspectable WebContents</div>
  <div style="margin: 4px">
    <span style="color: red">WARNING:</span> This page is deprecated and
    will be removed by m96. Please use
    <input type="text" readonly value="chrome://inspect" size="13"
        style="background-color: #e0e0e0; border-width: 0; font-weight: 800">
    </input> instead. Use <a href="http://crbug.com/1232509"
        >crbug.com/1232509</a> for comments, questions and feedback.
  </div>

  <div id='items'></div>
</body>
</html>
